<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZPPChat | Login</title>
  
  <!-- JQuery -->
  <script                 src="/js/jquery-1.8.2.js"></script>
  
  <!-- Styling UI elements (checkables and scroller). -->
  <link rel="stylesheet"  href="/css/checkable/checkable.css">
  <script                 src="/js/checkable.js"></script>
  <link rel="stylesheet"  href="/css/scroller.css">
  <script                 src="/js/scroller.js"></script>
  
  <!-- User-defined scripts and stylesheets. -->
  <link rel="stylesheet"  href="/css/global.css">
  <link rel="stylesheet"  href="/css/login.css">
  <script                 src="/js/login.js"></script>
</head>
	
<body>
  <div id="login" class="box inside-bordered top-box standard-width centered">
    <h1>Log In</h1>
    
    <form action="{{ form_action_url }}" method="post">			
      <fieldset id="inputs">
        <!-- Login -->
        <input type="text" name="username" maxlength="{{ user_limits.username_max_length }}"
               placeholder="Username" value="{{ values.username }}"
               class="field username-input" required autofocus tabindex="1">
		<!-- Password -->
		<input type="password" name="password" maxlength="{{ user_limits.password_max_length }}"
		       placeholder="Password" class="field password-input" required tabindex="2">
  			
        <!-- Room selection. -->
        <div id="room-choice">				
		  <!-- Type of a room: creating a new room or joining an existing one. -->
		  <div id="room-type">					
            <label>Create a room</label>
            <input type="radio" name="room-type" value="new-room"
                   {% if values.room_type != "existing-room" %}checked{% endif %}
                   class="room-type-choice checkable" tabindex="3">
				
            <label>Join a room</label>
            <input type="radio" class="room-type-choice checkable" name="room-type"
                   {% if values.room_type == "existing-room" %}checked{% endif %}
                   value="existing-room" tabindex="4">
          </div>
          
          <!-- Room's name. -->
          <input type="text" name="room-name" maxlength="{{ room_limits.name_max_length }}"
                 placeholder="Room's name" value="{{ values.room_name }}"
                 id="room-name" class="field room-input" required tabindex="5">
        </div>
      </fieldset>
      
      <fieldset id="actions">
        <input type="submit" value="Log in" id="submit" class="button left"
               tabindex="6">
        <a href="{{ password_recovery_url }}" class="right" tabindex="8">Forgot your password?</a>
        <a href="{{ register_url }}" class="right" tabindex="7">Register</a>
      </fieldset>
    </form>
    
    <!-- Error messages displayed here. -->
    <p id="error-messages" class="error centered standard-width">
    {% if errors.authentication_fail %}
      Incorrect password or username.
    {% else %}{% if errors.room_full %}
      Room is full. Select another one.
    {% else %}{% if errors.room_name_not_unique %}
      Room with this name already exists. Choose another name.
    {% else %}{% if errors.room_name_invalid_format %}
      Room name can consist only of letters, numbers and _.
    {% else %}{% if errors.room_name_invalid_length %}
      Room name must be between {{ room_limits.name_min_length }} and {{ room_limits.name_max_length }} characters long.
    {% else %}{% if errors.room_not_exist %}
      Room with this name doesn't exist. Select once more.
    {% else %}{% if errors.user_already_in_room %}
      You are already are connected to this room. Cannot join it twice.
    {% endif %}{% endif %}{% endif %}{% endif %}{% endif %}{% endif %}{% endif %}
    </p>
  
	<!-- List of existing rooms.
	     Contained inside of #login, for being able to relatively position it
	     to #login. -->
    <div id="existing-rooms" class="box inside-bordered">
      <h2 class="centered">Select a room</h2>
    
      <div id="room-list" class="scrollable">
        <div class="scrollable-content">
        {% if available_rooms %}
          <ul>
          {% for room in available_rooms %}
            <li>
              <button class="button room-button" value="{{ room.name }}" tabindex="5">
                {{ room.name }}
              </button>
            </li>
          {% endfor %}
          </ul>
        <!-- There are no rooms to show. -->
        {% else %}
          <p id="no-rooms-message" class="error centered">No rooms available. Create your own one.</p>
        {% endif %}
        </div>
      </div>
    </div>
  </div>
</body>

</html>